<template>
	<view>
		<uni-card>
			
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" label-width="100">
				<uni-forms-item  name="directorId">
					<label>
						<uni-row>
							<uni-col :span="14">通讯设备编号</uni-col>
							<uni-col :span="10" >
								<button type="primary" size="mini" style="position: relative;bottom: 20rpx;left: 20rpx;" @click="openScanCode">扫码录入</button>
							</uni-col>
						</uni-row>
					</label>
					<uni-easyinput type="text" v-model="formData.directorId" placeholder="请输入通讯设备编号" />
				</uni-forms-item>
				<uni-forms-item label="控制器编号" name="directorCode">
					<uni-easyinput v-model="formData.directorCode" type="text" placeholder="请输入控制器编号" />
				</uni-forms-item>
				<uni-forms-item label="控制器名称" name="directorName">
					<uni-easyinput v-model="formData.directorName" type="text" placeholder="请输入控制器编号" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput v-model="formData.remark" type="text" placeholder="请输入控制器编号" />
				</uni-forms-item>
			</uni-forms>
			<view class="">
				<view class="" style="margin-bottom: 20rpx;">
					<button @click="submit" type="primary">提交</button>
				</view>
				<view class="">
					<button @click="clearForm">清空</button>
				</view>
			</view>
			
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					directorId: null,
					directorCode: null,
					directorName: null,
					remark: null
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					}
				}
			}
		},
		methods: {
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			clearForm(){
				this.formData = {
					directorId: null,
					directorCode: null,
					directorName: null,
					remark: null
				}
			},
			openScanCode(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	// .map_container{
	//   // position: absolute;
	//   top: 0;
	//   bottom: 0;
	//   left: 0;
	//   right: 0;
	// }
</style>